<template>
  <footer class="footer">
    <ul>
      <router-link to="/home" tag="li">
        <span class="iconfont icon-shouye"></span>
        <p>首页</p>
      </router-link>
      <router-link to="/kind" tag="li">
        <span class="iconfont icon-fenlei"></span>
        <p>分类</p>
      </router-link>
      <router-link to="/cart" tag="li">
        <span class="iconfont icon-gouwu"></span>
        <p class="cart" >
          购物车
          <span class="num" v-if="$store.state.users.login_state">
             {{ this.$store.getters['cart/totalNum'] }}
          </span>
         </p>
      </router-link>
      <router-link to="/user" tag="li">
        <span class="iconfont icon-wode"></span>
        <p>我的</p>
      </router-link>
    </ul>
  </footer>
</template>
<script>
import { getCartData } from '@/api'
import * as types from '@/store/mutation.types'
export default {
  mounted () {
    if (this.$store.state.users.login_state) {
      getCartData({
        userid: localStorage.getItem('userid')
      }).then(res => {
        this.$store.commit({
          type: 'cart/' + types.CHANGE_CART_LIST,
          payload: res.data.data
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cart {
  position: relative;
  .num {
    width: 20px;
    height: 20px;
    background: #e30d0d;
    position: absolute;
    right: 0;
    top: -30px;
    font-size: 10px;
    border-radius: 10px;
    text-align: center;
    line-height: 20px;
    color: white;
  }
}

</style>
